<template>
  <div class="goods">
    <!--菜单-->
    <div class="menu-wrapper" ref="menuWrapper">
      <ul>
        <li class="menu-item" v-for="(item,index) in goods" :class="{ 'current' : currentIndex === index }"
            @click="fnSelectMenu(index)">
        <span class="text">
          <span class="icon" :class="supportIcon[item.type]" v-show="item.type != -1"></span>{{item.name}}
        </span>
        </li>
      </ul>
    </div>

    <!--商品列表-->
    <div class="goods-wrapper" ref="goodsWrapper">
      <ul>
        <li v-for="item in goods" class="good-item-hook">
          <h1 class="title">{{item.name}}</h1>
          <ul>
            <li v-for="food in item.foods" class="food-item" @click="fnShowDetail(food)">
              <div class="icon">
                <img :src="food.image">
              </div>
              <div class="content">
                <div class="name">{{food.name}}</div>
                <div class="desc">{{food.description}}</div>
                <div class="count">
                  <span>月售{{food.sellCount}}份</span><span class="rating">好评率{{food.rating}}%</span>
                </div>
                <div class="food-price">
                  <div>
                    <span class="price"><span style="font-size: 10px;font-weight: normal;">￥</span>{{food.price}}</span>
                    <span class="oldPrice" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
                  </div>
                  <cart-control :food="food" @add-cart="emitAddCart"></cart-control>
                </div>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>

    <!--购物车-->
    <shop-cart ref="shopCart" :delivery-price="seller.deliveryPrice" :min-price="seller.minPrice"
               :selectFoods="selectFoods"></shop-cart>

    <!--商品详情-->
    <good-detail ref="foodDetail" :food="selectFood"></good-detail>
  </div>
</template>

<script type="text/ecmascript-6">
  import svc from '../../common/js/service'
  import BScroll from 'better-scroll'
  import ShopCart from '../shopcart/ShopCart.vue'
  import CartControl from '../cartcontrol/CartControl'
  import GoodDetail from '../gooddetail/GoodDetail'

  export default {
    props: {
      seller: {
        type: Object
      }
    },
    data () {
      return {
        // 商品信息
        goods: [],
        // 优惠图标
        supportIcon: ['decrease', 'discount', 'special', 'invoice', 'guarantee'],
        // 每个商品模块的高度
        listLength: [],
        // 当前Y轴滚动的距离
        scrollY: 0,
        // 当前选择的商品
        selectFood: {}
      }
    },
    computed: {
      // 计算当前商品是那一块的
      currentIndex () {
        for (let i = 0; i < this.listLength.length; i++) {
          let min = this.listLength[i]
          let max = this.listLength[i + 1]
          if (!max || (this.scrollY >= min && this.scrollY < max)) {
            return i
          }
        }
        return 0
      },
      // 选中的商品
      selectFoods () {
        let selects = []
        this.goods.forEach((good) => {
          good.foods.forEach((food) => {
            if (food.count > 0) {
              selects.push(food)
            }
          })
        })
        return selects
      }
    },
    components: {
      ShopCart,
      CartControl,
      GoodDetail
    },
    methods: {
      // 获取商品信息
      fnGetGoods () {
        let that = this
        svc.fnGetData('/api/goods', {}, function (res) {
          if (res.body.ErrCode === 0) {
            that.goods = res.body.Data
            // $nextTick() DOM渲染完毕的回调函数
            that.$nextTick(() => {
              // 初始化better-scroll
              that.fnInitScroll()
              // 获取每个商品块的高度
              that.fnCalculateHeight()
            })
          }
        })
      },
      // 初始化better-scroll
      fnInitScroll () {
        // 菜单栏滚动
        this.menuScroll = new BScroll(this.$refs.menuWrapper, {
          click: true
        })
        // 商品栏滚动
        this.goodsScroll = new BScroll(this.$refs.goodsWrapper, {
          click: true,
          probeType: 3
        })

        // 获取当前Y轴滚动的距离
        this.goodsScroll.on('scroll', (pos) => {
          this.scrollY = Math.abs(Math.round(pos.y))
        })
      },
      // 获取每个商品块的高度
      fnCalculateHeight () {
        var that = this
        let goodsList = this.$refs.goodsWrapper.getElementsByClassName('good-item-hook')
        let height = 0
        that.listLength.push(height)
        for (let i = 0; i < goodsList.length; i++) {
          let item = goodsList[i]
          height += item.clientHeight
          that.listLength.push(height)
        }
      },
      // 点击菜单展示相应商品
      fnSelectMenu (index) {
        let goodsList = this.$refs.goodsWrapper.getElementsByClassName('good-item-hook')
        this.goodsScroll.scrollToElement(goodsList[index], 300)
      },
      // 点击子组件(CartControl -> 增加商品方法)时触发事件
      emitAddCart (target) {
        // 优化第一次小球抛落,异步执行两个动画
        this.$nextTick(() => {
          this.$refs.shopCart.fnDrop(target)
        })
      },
      // 显示商品详情
      fnShowDetail (food) {
        this.selectFood = food
        this.$refs.foodDetail.fnShow()
      }
    },
    mounted () {
      // 获取商品信息
      this.fnGetGoods()
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../common/scss/mixin";

  .goods {
    display: flex;
    position: absolute;
    top: 174px;
    bottom: 46px;
    width: 100%;
    overflow: hidden;

    //菜单
    .menu-wrapper {
      flex: 0 0 80px;
      width: 80px;
      height: 100%;
      background: #f3f5f7;
      .menu-item {
        display: table;
        width: 56px;
        height: 54px;
        padding: 0 12px;
        &.current {
          background: #fff;
          margin-top: -1px;
          .text {
            border-bottom: none;
          }
        }
        .text {
          display: table-cell;
          vertical-align: middle;
          font-size: 12px;
          font-width: 200;
          line-height: 14px;
          border-bottom: 1px rgba(7, 17, 27, .1) solid;
          .icon {
            display: inline-block;
            width: 12px;
            height: 12px;
            background-size: 12px;
            background-repeat: no-repeat;
            vertical-align: bottom;
            margin-right: 2px;
          }
          .decrease {
            @include bg-image('./img/decrease_3')
          }
          .discount {
            @include bg-image('./img/discount_3')
          }
          .special {
            @include bg-image('./img/special_3')
          }
          .guarantee {
            @include bg-image('./img/guarantee_3')
          }
          .invoice {
            @include bg-image('./img/invoice_3')
          }
        }
      }
    }

    //商品列表
    .goods-wrapper {
      flex: 1;
      .title {
        height: 26px;
        line-height: 26px;
        background: #f3f5f7;
        border-left: 2px solid #d9dde1;
        font-size: 12px;
        color: rgb(147, 153, 157);
        padding-left: 16px;
      }

      .food-item {
        display: flex;
        margin: 18px;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(7, 17, 27, .1);
        &:last-child {
          border-bottom: none;
        }

        .icon {
          flex: 0 0 57px;
          margin-right: 10px;
          img {
            width: 57px;
            height: 57px;
          }
        }

        .content {
          flex: 1;
          .name {
            font-size: 14px;
            color: rgb(7, 17, 27);
            line-height: 14px;
            margin-top: 2px;
          }
          .desc {
            font-size: 10px;
            color: rgb(147, 153, 159);
            line-height: 15px;
            margin-top: 8px;
          }
          .count {
            font-size: 10px;
            color: rgb(147, 153, 159);
            line-height: 10px;
            margin-top: 8px;
            .rating {
              margin-left: 12px;
            }
          }

          .food-price {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            height: 40px;
            font-size: 0;
            .price {
              font-size: 14px;
              color: rgb(240, 20, 20);
              font-weight: 700;
              margin-right: 8px;
            }
            .oldPrice {
              font-size: 10px;
              color: rgb(147, 153, 159);
              vertical-align: top;
              text-decoration: line-through;
            }
          }
        }
      }
    }
  }
</style>
